<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>坤坤酷跑-登录</title>
    <!-- 连接css文件 -->
    <link rel = "stylesheet" type = "text/css" href = "style.css">
  </head>
  <body>
    <!-- 导入所有图片 -->
    <section>
        <img src = "bg.png" id = "bg">
        <img src = "moon.png" id = "lanqiu">
        <img src = "mountain.png" id = "tietu">
        <img src = "beidai.png" id = "qianjin">
        <h2 id = "text">一个真正的man</h2>
    </section>
    <script type="text/javascript">
        //先拿到所有图片的 document 对象
        let bg = document.getElementById("bg");
        let lanqiu = document.getElementById("lanqiu");
        let tietu = document.getElementById("tietu");
        let qianjin = document.getElementById("qianjin");
        let text = document.getElementById("text");

        //给图片增加滚动操作
        window.addEventListener('scroll',function(){
            var value = window.scrollY;

            bg.style.top = value * 1 + 'px';//参数控制滑动速度大小
            lanqiu.style.left = value * 1 + 'px';
            // tietu.style.top = -value * 0.3 + 'px';
            // qianjin.style.top = value * 1 + 'px';
            text.style.top = value * 0.5 + 'px';
        });
    </script>
    <!-- 添加登录表单 -->
    <div class="form-container">
      <h2 class="form-title">点击登录开始游戏 (游客用户名：ikun 游客密码：ni~gan~ma~)</h2>
      <form action="#" method="POST">
          <input type="text" name="username" class="form-input" placeholder="用户名" required>
          <input type="password" name="password" class="form-input" placeholder="密码" required>
          <button type="button" class="form-submit" onclick="login()">登录</button>
      </form>
    </div>
    <script>
      function login() {
          //获取用户名和用户密码
          var username = document.getElementsByName('username')[0].value;
          var password = document.getElementsByName('password')[0].value;
          // 登录验证操作
          var correctUsername = "ikun";
          var correctPassword = "ni~gan~ma~";
          if (username === correctUsername && password === correctPassword) {
              // 登录成功，跳转到指定链接（在新标签页中打开）
              window.open('game.html', '_blank');
          } else {
              // 登录失败，弹出警告框
              alert("你不是真爱粉，你个小黑子，举豹了！");
          }
      }
  </script>
  <hr>
  <br>
  <h3 id = "maker">
    页面制作：花下的晚风
  </h3>
  </body>
</html>